<template>
	<div class="app-container" >
		<div>首页</div>
		<!-- <el-table :data="tableData" row-key="id" border class="draggable-table" style="width: 300px">
			<el-table-column label="id" prop="id" width="80" align="center"></el-table-column>
			<el-table-column label="姓名" prop="name" align="center" ></el-table-column>
		</el-table> -->
	</div>
</template>
<script>
import { onMounted, reactive, toRefs } from "vue"

	export default {
		name: "temp",
		setup() {
			const data = reactive({
				tableData: [
					{ id: 1, name: "张三" },
					{ id: 2, name: "李四" },
					{ id: 3, name: "王五" }
				]
			})

			// 行拖拽
			const rowDrop = () => {
				// 要侦听拖拽响应的DOM对象
				const tbody = document.querySelector('.draggable-table .el-table__body-wrapper tbody');
				Sortable.create(tbody, {
				// 结束拖拽后的回调函数
					onEnd({ newIndex, oldIndex }) {
						console.log('拖动了行，当前序号：' + newIndex);
						// const currentRow = that.tableData.splice(oldIndex, 1)[0];
						// that.tableData.splice(newIndex, 0, currentRow);
					}
				})
			}

			onMounted(() => {
				setTimeout(() => {
				}, 1000)
			})

			return {
				...toRefs(data)
			}
		}
	};
</script>
<style lang="scss" scoped>

</style>